<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import GridCanvas from '@/composables/useCanvas/GridCanvas'
import useSection from '@/composables/useSection'
import { onMounted, ref } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { sectionId } = defineProps<{
  sectionId: number
}>()

const { find: findSection, calcCanvasAndHeight } = useSection()

onMounted(async () => {
  await findSection(sectionId)

  const parent = canvas.value?.parentNode?.parentNode as any
  const { width, height, startY, endX, endY } = await calcCanvasAndHeight(parent!.offsetWidth, parent!.offsetHeight)

  const ctx = canvas.value?.getContext('2d')!
  new GridCanvas(canvas.value!, ctx, width, height, startY, 40, endX, endY).draw()
})
</script>
